/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="project-nav-container">
        <div v-for="(item,index) in navList" 
             :key="index" 
             class="project-nav__item"
             :class="{'active': index===activeIndex}"
             @click="_jumpNav(item,index)">
            <div class="nav-img"
                 :class="item.url"></div>
            <div class="name">
                {{ item.name }}
            </div>
        </div>
    </div>
</template>

<style lang="less">
    .project-nav-container{
        display: flex;
        height: 112px;
        align-items: center;
        justify-content: center;
        width: 100%;
        background: url(../../img/ai_flow/nav_bg.png) no-repeat;
        background-size: 100% 100%;
        .project-nav__item{
            display: flex;
            justify-content: center;
            align-items:center;
            cursor: pointer;
            position: relative;
            margin-right:80px;
            background: #FFFFFF;
            border: 1px solid #D8E0EC;
            border-radius: 4px;
            width: 124px;
            height: 56px;
            &:hover,&.active{
                border: 2px solid #204ED9;
            }
            &:last-of-type{
                margin-right: 0;
                &:after{
                    display: none;
                }
            }
            &:after{
                width: 94px;
                height: 12px;
                background: #DEE3ED;
                position: absolute;
                content: '';
                background: url(../../img/ai_flow/arrow.png) no-repeat;
                background-size: 100% 100%;
                left: 117px;
                z-index: 12;
            }
            .nav-img{
                width: 24px;
                height: 24px;
                border-radius: 100%;
                margin-right: 8px;
                &.feature_manager{
                    background: url(../../img/ai_flow/feature_manager.png) no-repeat;
                    background-size: 100% 100%;
                }
                &.model_training{
                    background: url(../../img/ai_flow/model_training.png) no-repeat;
                    background-size: 100% 100%;
                }
                &.data_load{
                    background: url(../../img/ai_flow/data_load.png) no-repeat;
                    background-size: 100% 100%;
                }
              
            }
            .name{
                color: #14161A;
            }
        }
    }
</style>

<script lang=ts>
import { Component, Vue, Watch } from 'vue-property-decorator';

@Component
export default class ProjectNav extends Vue {
    navList = [{
        name:_('数据加载'),
        url:'data_load'
    }, {
        name:_('特征处理'),
        url:'feature_manager'
    }, {
        name:_('模型训练'),
        url:'model_training'
    }]

    activeIndex = 0

    get routeName () {
        return this.$route.name;
    }

    @Watch('routeName', { deep: true, immediate: true})
    routeNameChange () {
        this.activeIndex = this.navList.findIndex(item=>item.url === this.$route.name);
    }

    // TODO: REMOVE ANY
    _jumpNav (item: SafeAny, index: number) {
        this.activeIndex = index;
        if (!!this.$route.query.serviceIndex) {
            delete this.$route.query.serviceIndex;
        }
        this.$router.push({
            path:`/project_manager/${item.url}`,
            query:this.$route.query
        });
    }
};
</script>
